<template>
  <el-dialog
    v-model="myModel"
    title="用户信息"
    width="50%"
    :before-close="handleClose"
  >
    <span class="tip"
      >为确保协议签署的有效性请仔细核对用户信息是否正确。若信息有误，请拒绝该协议后，联系用户重新签约</span
    >
    <div class="dialog-body">
      <div class="identity-card">
        <div class="identity-card-item">
          <span class="card-text">身份证头像面：</span>
          <el-image
            style="width: 400px; height: 260px"
            :src="img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            show-progress
            fit="cover"
            :preview-src-list="srcList"
            hide-on-click-modal
          />
        </div>
        <div class="identity-card-item">
          <span class="card-text">身份证国徽面：</span>
          <el-image
            style="width: 400px; height: 260px"
            :src="img"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            show-progress
            fit="cover"
            :preview-src-list="srcList"
            hide-on-click-modal
          />
        </div>
      </div>
      <div class="detail">
        <span class="detail-lable">姓名：</span>
        <span>王先生</span>
      </div>
      <div class="detail">
        <span class="detail-lable">证件号码：</span>
        <span>372910090989079868767567</span>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import img from "@/imgs/banner3.jpg";

let srcList = [img];

let myModel = defineModel();

const handleClose = () => {
  myModel.value = false;
};

const handleConfirm = () => {
  myModel.value = false;
};
</script>
<style lang="scss" scoped>
.tip {
  color: #409eff;
  font-size: 12px;
}
.dialog-body {
  padding: 24px;
  .identity-card {
    display: flex;
    gap: 24px;
    .identity-card-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .card-text {
        margin-bottom: 10px;
      }
    }
  }

  .detail {
    margin-top: 24px;
    .detail-lable {
      width: 100px;
      text-align: right;
      margin-right: 10px;
    }
  }
}
</style>
